import React, {
  Component
} from "react"

import {
  StyleSheet,
  View,
  Text,
  TextInput
} from "react-native"

import {
  connect
} from "react-redux"

import * as action from "./action"

export class Display extends Component {
  constructor(props) {
    super(props)

    this.onButtonPress = this.onButtonPress.bind(this)
    this.onChangeText = this.onChangeText.bind(this)
  }

  static propTypes = {
    display: React.PropTypes.func.isRequired,
    buffer: React.PropTypes.func.isRequired,
    text: React.PropTypes.string.isRequired,
    buffered: React.PropTypes.string.isRequired
  }

  render() {
    return (
      <View style={style.app}>
        <Text style={style.text}>
          {this.props.text}
        </Text>
        <TextInput
          style={style.textInput}
          onChangeText={this.onChangeText}
        />
        <Text onPress={this.onButtonPress}>Display Some Text Using React Native!</Text>
      </View>
    )
  }

  onButtonPress() {
    if (this.props.buffered.length > 0) {
      this.props.display(this.props.buffered)
    }
  }

  onChangeText(text) {
    this.props.buffer(text)
  }
}

const style = StyleSheet.create({
  app: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 17,
    marginBottom: 7,
  },
  textInput: {
    width: 200,
    height: 40,
    borderColor: 'gray',
    borderRadius: 5,
    alignSelf: 'center',
    borderWidth: 1
  }
});

const mapStateToProps = state => {
  return {
    text: state.getIn(['display', 'display', 'text']),
    buffered: state.getIn(['display', 'display', 'buffered'])
  }
}

export default connect(mapStateToProps, action)(Display)
